<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="shopping.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white">器械说明</span></li></a>
                    <a href="shopping.html"><li><span style="color: white">商城</span></li></a>
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
 <!-- 导航栏 -->
 <nav class="navbar">
    <div class="nav-container">
        <div class="logo">辅具商城</div>
        <div class="search-bar">
            <input type="text" 
                   class="search-input" 
                   placeholder="搜索辅助器具...">
        </div>
        <aside class="filter-sidebar">
        <div class="cart-icon">
            🛒
            <div class="cart-count">0</div>
        </div>
    </div>
</nav>
<!-- 商品列表 -->
<main class="product-grid">
    <!-- 商品卡片示例 -->
    <div class="product-card">
        <div class="product-image">
            <span class="badge">热卖商品</span>
            <img src="image/chair.jpg" 
                 alt="助行架" 
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">助行架</h3>
            <p class="product-price">¥200</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <div class="product-card">
        <div class="product-image">
            <span class="badge">热卖商品</span>
            <img src="image/watch.jpg" 
                 alt="盲人触觉手表" 
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">盲人触觉手表</h3>
            <p class="product-price">¥130</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <div class="product-card">
        <div class="product-image">
            <span class="badge">热卖商品</span>
            <img src="image/balance.jpg" 
                 alt="平衡板" 
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">平衡板</h3>
            <p class="product-price">¥100</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <div class="product-card">
        <div class="product-image">
            <span class="badge">热卖商品</span>
            <img src="image/help.jpg" 
                 alt="扶手" 
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">扶手</h3>
            <p class="product-price">¥700</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <div class="product-card">
        <div class="product-image">
            <span class="badge"></span>
            <img src="" 
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">XXX</h3>
            <p class="product-price">¥450</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <div class="product-card">
        <div class="product-image">
            <span class="badge"></span>
            <img src=""  
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">XXX</h3>
            <p class="product-price">¥1200</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <div class="product-card">
        <div class="product-image">
            <span class="badge"></span>
            <img src="" 
                 class="product-img">
        </div>
        <div class="product-info">
            <h3 class="product-title">XXX</h3>
            <p class="product-price">¥3500</p>
            <button class="add-to-cart">
                🛍️ 加入购物车
            </button>
            <button class="favorite-btn" aria-label="收藏商品">
                <svg class="heart-icon" viewBox="0 0 24 24">
                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </button>
        </div>
    </div>
    <!-- 更多商品... -->
</main>
<script>
// 购物车功能
let cartItems = [];
// 加入购物车逻辑
document.querySelectorAll('.add-to-cart').forEach(btn => {
    btn.addEventListener('click', () => {
        const product = {
            title: btn.closest('.product-card').querySelector('.product-title').textContent,
            price: btn.closest('.product-card').querySelector('.product-price').textContent
        };
        cartItems.push(product);
        updateCartCounter();
        showAddToCartAnimation(btn);
    });
});
// 更新购物车数量
function updateCartCounter() {
    document.querySelector('.cart-count').textContent = cartItems.length;
}
// 加入购物车动画
function showAddToCartAnimation(button) {
    const clone = button.cloneNode(true);
    const originalRect = button.getBoundingClientRect();
    
    clone.style.position = 'absolute';
    clone.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
    document.body.appendChild(clone);
    requestAnimationFrame(() => {
        const cartIcon = document.querySelector('.cart-icon');
        const targetRect = cartIcon.getBoundingClientRect();
        
        clone.style.left = originalRect.left + 'px';
        clone.style.top = originalRect.top + 'px';
        
        requestAnimationFrame(() => {
            clone.style.left = targetRect.left + 'px';
            clone.style.top = targetRect.top + 'px';
            clone.style.transform = 'scale(0.5)';
            clone.style.opacity = '0';
        });
    });
    setTimeout(() => clone.remove(), 600);
}
</script>

<script src="shopping.js"></script>
    
   
</body>
</html>